<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>@import url("bootstrap/bootstrap.min.css" )</style>
		<script src="jquery-3.6.0.min.js"></script>
		<script src="bootstrap.min.js"></script>
		<style type="text/css">
			.wrapper{
				width: 1000px;
				height: 500px;
				display: flex;
			    justify-content: space-evenly;
			}
			
			.blue-txt {
				color: blue;
			}
			td {
				text-align: center;
				width: 250px;
			}
			.del {
				color: blue;
				cursor: pointer;
			}
		
		</style>
		
		
	</head>
	<body>
		<div class = "wrapper" >
		    
		    <div class = "one">
			
  				<div class="shuru">
    				<label >书名：</label>
    		    	</br>
    				<input type="text" class="shuming" id="shuming">
  				</div>
 		 		<div class="shuru">
    				<label >编号：</label>
    				</br>
    				<input type="number" class="bianhao" id="bianhao">
  				</div>
  				<div class="shuru">
    				<label >价格：</label>
    				</br>
    				<input type="number" class="jiage" id="jiage">
  				</div>
  				<div class="shuru">
					<label>类型：</label>
					</br>
					<input type="radio"  name="hobby" value="玄幻" />玄幻</br>
					<input type="radio"  name="hobby" value="武侠"/>武侠</br>
					<input type="radio"  name="hobby" value="经典"/>经典</br>
					<input type="radio"  name="hobby" value="其他"/>其他
				</div>
  				<button type="button" class="btn btn-primary" onclick="insertNewRow()">新增</button>
  		    	<button type="button" class="btn btn-primary">更新</button>
		 	
		    </div>
		    <div class="two"></div>
				<table id="table">
					<tr>
					
						<td width="50" id="a">
							书名
						</td>
						<td width="50" id="b">
							编号
						</td>
						<td width="50" id="c">
							价格
						</td>
						<td width="50" id="d">
							类型
						</td>
						<td width="50" id="e">
							操作栏
						</td>
                 
					</tr>
				</table>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		window.onload = function() {
			
			let oriHtml = document.getElementById('table').innerHTML
			
			draw()
			
			
			function draw() {
				// 当前table的html代码
				let strOri = oriHtml
				console.dir(strOri)
				for (let i = 0; i < obj.length; i++) {
					strOri += `
						<tr>
							<td>
								${i+1}
							</td>
							<td>
								${obj[i].shuming}
							</td>
							<td>
								${obj[i].bianhao}
							</td>
							<td>
								${obj[i].jiage}
							</td>
							<td>
								${obj[i].leixing}
							</td>
							<td>
								<span class="del" id="${obj[i].id}">
									删除
								</span>
							</td>
						</tr>
					`
				}
				document.getElementById('table').innerHTML = strOri
				
				// 绑定点击事件
				for (let i = 0; i < obj.length; i++) {
					document.getElementById(obj[i].id).onclick = function() {
						console.log(obj[i].id)
						// 根据id删除对象数据 - 过滤出来数据
						let newData = []
						for (let j = 0; j < obj.length; j++) {
							if(obj[j].id !== obj[i].id) {
								newData.push(obj[j])
							}
						}
						obj = newData
						draw()
					}
				}
				//绑定添加事件
				
				
			}
			
		}
		function insertNewRow() {
       		var tab = document.getElementById("table");
       		var tr = document.createElement("tr");
            var td1 = document.getElementById('shuming');
            var td2 = document.getElementById('bianhao');
            var td3 = document.getElementById('jiage');
            var td4 = document.createElement("td");
            var td5 = document.createElement("td");
            var td6 = document.createElement("td");
            
            
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tr.appendChild(td5);
            tr.appendChild(td6);

            tab.appendChild(tr);
            td5.innerHTML = "<input type='button' value='删除' onclick='del(this)'  />"
            td6.innerHTML = "<input type='button' value='编辑' onclick='del(this)'  />"

  		}
		function del(p){
                p.parentElement.parentElement.parentElement.removeChild(p.parentElement.parentElement);
            }
	</script>
</html>
